<template>
	<view>
		<view class="swiperBox">
			<swiper class="faceimg" :autoplay="false" interval="6000" duration="200" :current="swiperCurr"
				@change="changeItem">

				<swiper-item v-if="videourl">
					<view class="videobox">
						<image v-if="!playing" class="image" style="width:100%; " :src="faceimages[0].thumb"
							mode="scaleToFill"></image>

						<view v-if="!playing" @tap="playvideo" class="icon kb-icon-play"></view>

						<view v-if="playing" class="video">
							<!-- #ifdef MP-WEIXIN -->
							<video :src="videourl" autoplay loop muted controls="controls"> </video>
							<!-- #endif -->
							<!-- #ifdef H5 -->
							<video :src="videourl" autoplay loop muted controls="controls">
								<source :src="videourl" type="video/mp4">
							</video>

							<!-- #endif -->
						</view>
					</view>
				</swiper-item>


				<swiper-item v-for="(item ,index) in faceimages" :key="index">
					<image class="image" style="width:100%; " :src="item.thumb" mode="scaleToFill"
						@click="previewImage(index)"></image>
				</swiper-item>
				<!-- 户型图 -->
				<swiper-item v-for="(item ,index) in hximgs" :key="index">
					<image class="image" style="width:100%; " :src="item.thumb" @click="previewHxtu(index)"
						mode="scaleToFill"></image>
				</swiper-item>

			</swiper>
			<!--图标-->
			<view class="panel" v-if="taglist.length">
				<view class="dleft">

					<up-subsection v-if="taglist.length>1" :list="taglist"
						:customStyle="{ height:'24px',opacity:0.7 ,width:(taglist?.length *60)+'px'}" mode="button"
						bgColor="#C4C2C0" activeColor="#333" :current="curNow" @change="sectionChange">
					</up-subsection>

				</view>

				<view class="dright">
					<view class="slidetype ">
						<text class="bds"></text>
						<text class="txt">{{current}}/{{typeTotal}}</text>
					</view>
				</view>

			</view>

		</view>
		<!-- 展示图片 视频的swiper -->
	</view>
</template>

<script>
	export default {
		name: "kb-group-swipe",
		props: {
			faceimages: {
				type: Array,
				value: []
			},
			videourl: {
				type: String,
				value: ""
			},
			hximgs: {
				type: Array,
				value: []
			},
			isshow: {
				type: Number,
				value: 1
			}

		},
		data() {
			return {
				current: 1,
				state: "hidden",
				videohiden: true,
				showdots: false,
				playing: false,
				curNow: 0,
				swiperCurr: 0,
			};
		},
		computed: {
			slides() {
				return this.faceimages
			},
			taglist() {
				var data = [];
				if (this.videourl) {
					data.push({
						name: '视频',
						type: 'video'
					})
				}
				if (this.faceimages?.length) {
					data.push({
						name: '图片',
						type: 'images'
					})
				}
				if (this.hximgs?.length) {
					data.push({
						name: '户型图',
						type: 'hxtu'
					})
				}

				return data;

			},
			typeTotal() {
				var type = this.taglist[this.curNow].type;
				if (type == 'video') {
					return 1
				}
				if (type == 'images') { //图片
					return this.faceimages.length
				}
				if (type == 'hxtu')
					return this.hximgs.length
				return 1;
			},

		},
		methods: {
			//滑动swiper-item 到第几个
			changeItem(e) {
				var nowType = this.taglist[this.curNow];
				var swiperIndex = e.detail.current
				this.swiperCurr = swiperIndex;

				// 常规计算
				if (swiperIndex == 0) {
					this.curNow = 0;
					this.current = 1;
				} else if (swiperIndex > 0 && this.faceimages?.length && swiperIndex < this.faceimages.length) {
					this.curNow = this.taglist[0].type == 'video' ? 1 : 0;
					this.current = this.taglist[0].type == 'video' ? swiperIndex : swiperIndex + 1;
					this.playing = false;
				} else { //户型图显示
					this.curNow = this.taglist.length - 1;
					this.current = swiperIndex - (this.faceimages?.length || 0) + 1
				}

			},
			playvideo() {
				this.playing = true
			},
			//视频图片户型图切换到第几个
			sectionChange(i) {

				if (this.taglist[i].type == 'video')
					this.swiperCurr = 0
				else if (this.taglist[i].type == 'images')
					this.swiperCurr = this.videourl ? 1 : 0;
				else if (this.taglist[i].type == 'hxtu')
					this.swiperCurr = this.faceimages.length;
				else
					this.swiperCurr = 0;
			},
			previewImage(index) {
				var imgs = [];
				this.faceimages.forEach(obj => {
					imgs.push(obj.thumb);
				});
				uni.previewImage({
					current: index,
					urls: imgs
				})
			},
			previewHxtu(index) {
				var imgs = [];
				this.hximgs.forEach(obj => {
					imgs.push(obj.thumb);
				});
				uni.previewImage({
					current: index,
					urls: imgs
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.swiperBox {
		position: relative;
		background-color: #fff;
	}

	.faceimg {
		height: 200px;
		text-align: center;
	}

	.faceimg .image {
		height: 200px;
		object-fit: cover;
	}

	.videobox {
		position: relative;
		background: #000;
		height: 200px;

		.icon {
			position: absolute;
			left: 50%;
			top: 30%;
			margin-left: -40px;
		}
	}

	.video {
		height: 190px;
		width: 100%;
		background: #000000 !important;

	}

	.panel {
		position: absolute;
		left: 0px;
		bottom: 40rpx;
		display: flex;
		justify-content: space-between;
		vertical-align: middle;
		width: 100%;
		height: 60rpx;
		z-index: 2;
	}

	.dleft {
		padding-left: 40rpx;

	}

	.dright {
		padding-right: 40rpx;

	}

	.slidetype {
		position: relative;
		width: 50px;
	}

	.slidetype .bds,
	.slidetype .txt {
		width: 100%;
		display: block;
		height: 40rpx;
		left: 0;
		top: 0;
		padding: 2rpx 10rpx;
		border-radius: 40px;
		color: #fff;
		font-size: 24rpx;
		position: absolute;
		text-align: center;
		line-height: 40rpx;
	}

	.bds {
		background-color: #222;
		opacity: .5;
	}

	.active .txt {
		color: #222;
	}
</style>